<template>
    <div class="particulars">
        <div v-if="result==1">
            <!--查询有结果-->
            <div class="parttitle">
                <div class="part_body">
                    <div class="part_left">
                        <vue-zoom
                            :sImg="sImg?sImg+`?x-oss-process=image/resize,m_pad,h_400,w_400`:$store.state.static"
                            :bImg="bImg?bImg:$store.state.static"
                            :sSize="{width:400,height:400}"
                            :bSize="{width:500,height:500}"
                            :mSize="{width:150,height:150}"
                        >
                        </vue-zoom>
                        <div v-show="sImg && sImg.indexOf('ffsp.fastfish.com')>=0" class="prism-player video-aliplayer" id="video1"
                             style="width: 400px;height: 400px;">
                        </div>
                        <div class="part_bottom">
                            <swiper :options="swiperOption" v-if="imgList.length > 0" ref="FfSwiper1">
                                <swiper-slide :key="index" v-for="(item,index) of imgList">
                                    <span
                                        class="swiper_span"
                                        :class="{'active':item.active}"
                                        @mouseover="imgslect(item,index)"
                                    >
                                        <img
                                          class="swiper_img"
                                          :src="item.URL?item.URL + `?x-oss-process=image/resize,,m_pad,h_55,w_55` : $store.state.static"
                                          alt=""
                                        />
                                    </span>
                                </swiper-slide>
                            </swiper>
                            <div class="ff-pre-next-ctr">
                                <span class="ff-swiper-pre iconfont icon-zuojiantou"
                                      :class="{'disabled':imgList.length>2}"> </span>
                                <span class="ff-swiper-next iconfont icon-youjiantou"
                                      :class="{'disabled':imgList.length>2}"> </span>
                            </div>
                        </div>
                        <div class="attention">
                            <span class="gjshopping" @click="AttentionClick">
                                <i class="iconfont"
                                   style="font-size: 12px;"
                                   :class="{'icon-shoucang':details.isAtten =='0','icon-yishoucang':details.isAtten =='1'}"
                                >
                                </i>{{details.isAtten =='1'?'取消收藏':'收藏'}}
                            </span>
                            <span>被收藏{{details.attention?details.attention:0}}次</span>
                            <!--<span>被浏览{{details.BROWSE}}次</span>-->
                        </div>
                    </div>
                    <div class="part_right">
                        <div class="part_right_left">
                            <h1 class="commodity_title">{{details.styCode}}<span style="margin-left: 30px;">{{details.styName}}</span></h1>
                            <div class="commodity_body">
                                <div class="commodity_body-head">
                                    <div class="left">
                                        <span>价格</span>
                                        <span class="current-price">¥{{details.stdPrice != null? details.stdPrice.toFixed(2) : ''}}</span>
                                    </div>
                                    <div class="right">
                                        <label v-if="details.bigClassRetailRank"><span class="number">{{details.bigClassRetailRank}}</span><span
                                                class="comment">大类销售排名</span></label>
                                        <label v-if="details.qtyRetailAvg"><span class="number">{{details.qtyRetailAvg}}</span><span
                                                class="comment">单店日均销售</span></label>
                                    </div>
                                </div>
                                <div class="commodity_body-props">
                                    <div class="props-item" v-if="details.styNatureName">
                                        <label class="name">商品性质:</label>
                                        <label class="value">{{details.styNatureName}}</label>
                                    </div>
                                    <div class="props-item" v-if="details.dateUp">
                                        <label class="name">计划上市日期:</label>
                                        <label class="value">{{details.dateUp? details.dateUp.split(' ')[0] :''}}</label>
                                    </div>
                                    <div class="props-item" v-if="details.dateDown">
                                        <label class="name">计划下架日期:</label>
                                        <label class="value">{{details.dateDown? details.dateDown.split(' ')[0] :''}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="table_body" v-if="details.styType === 'hot'">
                                <ul class="first_tr">
                                    <li><span class="tdleft">尺寸</span>
                                        <b class="bias"></b>
                                        <span class="tdright">颜色</span>
                                    </li>
                                    <li :key="index" v-for="(item,index) of sizeorder"><p>{{item.label}}</p>
                                        <div class="td_div">
                                            <span class="has-bottom">库存</span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="last_tr">
                                    <ul :key="index" v-for="(item,index) of skulist">
                                        <li class="last_tr--no-border">
                                            <img :src="item.img?item.img : $store.state.static" />
                                        </li>
                                        <li><span>{{item.label}}</span></li>
                                        <li :key="i" v-for="(j,i) of item.count">
                                            {{j.new}}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ff-goods-reservation" v-if="details.styType && details.styType !== 'hot'">
                                <div class="ff-goods--label">店长评价/预定中</div>
                                <i class="iconfont icon-shalou"></i>
                                <div class="ff-goods-reservation-time">
                                    距结束<span class="ff-goods-time-active">{{time.d}}</span>天<span class="ff-goods-time-active">{{time.h}}</span>时<span class="ff-goods-time-active">{{time.m}}</span>分
                                </div>
                            </div>
                            <div class="ff-commodity-btns">
                                <button class="ff-commodity--btn ff-commodity--prev" @click="goJump">返回上一页</button>
                                <!--<button
                                    class="ff-commodity&#45;&#45;btn ff-commodity&#45;&#45;booking"
                                    @click="goReservation"
                                    :class="!details.isOrder && !this.details.isCanOrder? 'ff-commodity&#45;&#45;booking-disabled' : ''"
                                >{{details.isOrder? '已预订' : '立即预定'}}</button>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <evaluate :details='details' @refresh="Add"></evaluate><!--图文详情-->
        </div>
        <div class="soldOut" v-if="result==2">
            <!--查询无结果-->
            <div class="soldOut_centen">
                <img :src="this.$store.state.static+'images/without@1x.png'" alt=""/>
                <div class="soldOutHint">
                    <h1>很抱歉，您查看的宝贝不存在，可能已下架。</h1>
                    <p>您可以：</p>
                    <p>1、检查刚才的输入</p>
                    <p>2、去其他地方逛逛：
                        <router-link to="/mall/index">
                            首页
                        </router-link>
                        /
                        <router-link :to="{path:'/mall/PersonCenter/order',query:{tab:'first'}}">
                            订单信息
                        </router-link>
                    </p>
                </div>
            </div>
        </div>
        <div id="box" class="box">
            <div class="box-in">
                <i class="iconfont icon-huidaodingbu"></i>
            </div>
        </div>
        <confirm-dialog
            :visible.sync="dialog.visible"
            :title="dialog.title"
            :content="dialog.content"
            @confirm="confirmOrCancelReservation"
        ></confirm-dialog>
    </div>
</template>
<script type="text/javascript">
    import 'swiper/dist/css/swiper.css'
    import vueZoom from '../../components/recommend/vuezoom'//放大镜组件
    import evaluate from '../../components/recommend/evaluate'//评价
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import confirmDialog from '@/components/dialog/confirmDialog.vue'
    export default {
        name: "particulars",
        data() {
            return {
                result: 1,//查询是否有结果
                RDCHTML: '',
                imgList: [],
                sImg: "",
                bImg: "",
                details: {},//详情数据
                skulist: [],//SKU
                sizeorder: [],//尺码
                swiperOption: {
                    // width: 50,//slider的宽度
                    // height: 50,//slider的高度
                    loopedSlides: 0,
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    spaceBetween: 0, //间距
                    slidesPerView: 5,//一页展示几个
                    direction: 'horizontal',//轮播方向
                    onlyExternal: true,//不允许拖动
                },
                dialog: {
                    visible: false,
                    title: '',
                    content: '',
                },
                time: {
                    d: '00',
                    h: '00',
                    m: '00'
                },
                timer: null,//定时器
                video: {//视频参数
                    vid: '',
                    auth: '',
                    url: ''
                }
            }
        },
        created() {
            this.Add()
        },
        mounted() {
            document.getElementsByTagName('html')[0].scrollTop = 0;
        },
        methods: {
            Add() {
                this.$http({
                    url: '/api/SelPro/GetStyItem',
                    method: 'post',
                    data: {
                        "distribId": this.$store.state.distribId,
                        "strId": this.$store.state.userId,
                        "styCode": this.$route.query.sku
                    }
                }).then((res) => {
                    if(res.data.code !== 1) return;
                    const details = res.data.data;
                    this.details = Object.assign({}, details, {
                        isOrder: details.isOrder === 1?true : false,//是否已预定
                        isCanOrder: details.isCanOrder === 1? true : false,//是否可预定
                    });
                    this.dealTime(this.details.orderEndDate);
                    let video = details.videoPlayAuth, imgList;
                    imgList = (details.img && JSON.parse(details.img) || []).map((obj, index) => {
                        return Object.assign({}, obj, {
                            active: index === 0 && !video? true : false
                        })
                    });
                    if (video && video.playURL) {
                        imgList.unshift({
                            URL: video.coverURL,
                            active: true
                        });
                        this.video.url = video.playURL;
                        this.video.vid = video.videoId;
                        this.video.auth = video.playAuth;
                        this.loadVideo();
                    }
                    this.imgList = imgList;
                    this.sImg = this.imgList.length > 0 && this.imgList[0].URL;
                    this.bImg = this.imgList.length > 0 && this.imgList[0].URL;
                    let skuData = this.dealColorSize(this.imgList, details.selPeoSkuInfos);
                    this.sizeorder = skuData.size;
                    this.skulist = skuData.data
                })
            },
            //控制关注的函数
            AttentionClick() {
                if (this.details.isAtten === '1') {//取消
                    this.$http({
                        method: "POST",
                        url: "/api/SelPro/UnMark",
                        data: {
                            "strId": this.$store.state.userId,
                            "styList": [
                                {
                                    "ps_C_PRO_ECODE": this.details.styCode,
                                    "ps_C_PRO_ID": this.details.styId    //不知道这个参数是啥
                                }
                            ]
                        }
                    }).then((res) => {
                        let data = res.data;
                        if(data.code === 1) {
                            this.details.isAtten = '0';
                            this.$store.commit('saveCollection', {
                                ecode: this.details.styCode,
                                status: false
                            })
                        }
                    });
                } else {   //加入收藏
                    this.$http({ //获取门店
                        method: "POST",
                        url: "/api/SelPro/AddMark",
                        data: {
                            "strId": this.$store.state.userId,
                            "styCodeList": [
                                this.details.styCode
                            ]
                        }
                    }).then((res) => {
                        let data = res.data;
                        if(data.code === 1) {
                            this.details.isAtten = '1';
                            this.$store.commit('saveCollection', {
                                ecode: this.details.styCode,
                                status: true
                            })
                        }
                    });
                }

            },
            disposeData(data, cb, sortCb) {
                let detail = {};
                data.map(obj => {
                    cb(detail, obj)
                })
                let arr = Object.keys(detail).map(obj => detail[obj])
                if (sortCb) return arr.sort(sortCb);
                return arr;
            },
            dealColorSize(imgList, skuList) {
                //筛选出所有颜色
                let colors = this.disposeData(skuList, (detail, obj) => {
                    detail[obj.clrCode] = {
                        id: obj.clrCode,
                        label: obj.clrName
                    }
                }, (a, b) => a.id - b.id);
                let detail = {};
                //筛选出所有尺寸
                detail.size = this.disposeData(skuList, (detail, obj) => {
                    detail[obj.sizeCode] = {
                        id: obj.sizeCode,
                        label: obj.sizeName
                    }
                }, (a, b) => a.id - b.id);
                //一一对应
                detail.data = colors.map(obj => {
                    let arr = [];
                    let img = imgList.find(n => n.ECODE === obj.id);
                    detail.size.map(size => {
                        let count = skuList.find(n => n.sizeCode === size.id && obj.id === n.clrCode);
                        arr.push({
                            skuCode: count ? count.skuCode : 0,
                            skuId: count ? count.skuId : 0,
                            stdSkuId: count ? count.skuId : 0,
                            new: count ? count.qtyStock : 0,
                            old: count ? count.qtyStock : 0
                        })
                    })
                    return {
                        label: obj.label,
                        img: img && img.URL? `${img.URL}?x-oss-process=image/resize,m_pad,h_50,w_50,,color_ffffff` : '',
                        count: arr
                    }
                })
                return detail;
            },
            imgslect(item, index) {
                this.sImg = item.URL;
                this.bImg = item.URL;
                this.imgList.forEach((obj, i) => {
                    obj.active = index === i;
                })
            },
            /*产品要求原页面跳转到另一个页面,点击这个的时候依然返回到原页面*/
            goJump () {
                this.$store.commit('delRecordRoute');
                this.$router.go(-1);
            },
            /*去预定*/
            goReservation () {
                let status = this.details.isOrder;
                if(!status) {
                    //预定
                    if(!this.details.isCanOrder) return;
                    this.dialog = {
                        visible: true,
                        title: '请确认是否预定该商品!',
                        content: '',
                        data: {
                            status: status
                        }
                    }
                    //是否可取消预订
                }else  {
                    //取消预定
                    this.dialog = {
                        visible: true,
                        title: '请确认是否取消预定该商品!',
                        content: '',
                        data: {
                            status: status
                        }
                    }
                }
            },
            /*确认或取消预定*/
            confirmOrCancelReservation () {
                if(!this.dialog.data) return;
                let status = this.dialog.data.status;
                this.$http({
                    url: status? '/api/SelPro/UnOrder' : '/api/SelPro/Order',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId,//门店ID
                        styId: this.details.styId,//商品id
                    }
                }).then(res => {
                    let data = res.data;
                    if(data.code === 1) {
                        this.details.isOrder = status? false : true;
                        this.details.isCanOrder = this.details.isOrder? false : true;
                        this.$store.commit('saveReservation', {
                            ecode: this.details.styCode,
                            status: this.details.isOrder
                        })
                    }else if(data.code === -1 && status) {
                        this.dialog = {
                            visible: true,
                            title: '不可取消预定理由',
                            content: `${data.message}`
                        }
                    }
                })
            },
            /*处理预定时间*/
            dealTime (time) {
                let _this = this;
                if(!time)return;
                let end = new Date(time).getTime() + 24*60*60*1000;
                function deal() {
                    let between = end - new Date().getTime();
                    if(between <= 0) {
                        _this.time = {
                            d: '00',
                            h: '00',
                            m: '00'
                        }
                        return clearInterval(_this.timer);
                    }
                    let d,h,m;
                    d = Math.floor(between/1000/60/60/24);
                    between = between - d*24*60*60*1000;
                    h = Math.floor(between/1000/60/60);
                    between = between - h*60*60*1000;
                    m = Math.floor(between/1000/60);
                    _this.time = {
                        d: d < 10? `0${d}` : d,
                        h: h < 10? `0${h}` : h,
                        m: m < 10? `0${m}` : m,
                    }
                }
                deal();
                this.timer = setInterval(deal, 1000);
            },
            /*初始化视频*/
            loadVideo() {
                let id = 'video1';
                if (!document.getElementById(id) || !this.video.vid) {
                    //console.log(this.video.vid);
                    setTimeout(this.loadVideo, 800);
                } else {
                    let palyer = new Aliplayer({
                        id: id,
                        width: "400px",
                        height: "400px",
                        "source": this.video.url,
                        "autoplay": true,
                        "isLive": false,
                        "rePlay": false,
                        "playsinline": true,
                        "preload": true,
                        "controlBarVisibility": "click",
                        "useH5Prism": true
                        /*vid: this.video.vid,
                        playauth: this.video.auth,*/
                    },function (play) {
                        console.log(play);
                        console.log('播放器创建了');
                    });
                }
            }
        },
        watch: {
            '$route.query.sku': {
                handler() {
                    this.Add();
                    //页面重载
                }
            }
        },
        components: {
            evaluate,
            vueZoom,
            swiper,
            swiperSlide,
            confirmDialog
        },
        computed: {
            swiper() {
                return this.$refs['FfSwiper1'].swiper
            }
        },
    }
</script>
<style lang="less" scoped type="text/less">
    .particulars {
        width: 1080px;
        margin: 10px auto 0;
        position: relative;

        .swiper_span {
            width: 53px;
            height: 53px;
            border: 1px solid transparent;
            display: inline-block;
            text-align: center;
        }

        .swiper_img {
            height: 100%;
        }

        .swiper_span.active {
            border: 1px solid #FD6442
        }

        .parttitle {
            padding: 0 0 50px 0;
        }

        .title_p {
            margin: 8px 0 18px 0px;
            height: 16px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: #1B1B1B;
            line-height: 16px;
        }

        .title_p .span {
            cursor: pointer;
        }

        .title_p .span:hover {
            color: #fd6442;
            text-decoration: underline;
        }

        .part_left {
            width: 400px;
            display: inline-block;
        }

        .part_body {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .part_bottom {
            position: relative;
            min-height: 73px;

            ul {
                margin-top: 10px;
                font-size: 0;
            }

            li {
                width: 50px;
                height: 50px;
                display: inline-block;
                border: 1px solid #FD6442;
                box-sizing: border-box;
                cursor: pointer;
                margin-right: 10px;
                // img{width: 100%;height: 100%;overflow: hidden;}
            }
        }

        .attention {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 10px;

            span {
                margin-right: 40px;
            }

            .gjshopping {
                cursor: pointer;
                -moz-user-select: none;
                -khtml-user-select: none;
                user-select: none;
            }
        }

        .commodity_body {
            margin-top: 10px;
        }

        .commodity_body .commodity_body-head {
            background-color: #F3F3F3;
            height: 75px;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;

            .left {
                span {
                    color: #9B9B9B;
                    display: inline-block;
                    margin-left: 16px;
                    &.current-price {
                        color: #E80000;
                        font-size: 32px;
                        font-weight: bold;
                        height: 36px;
                        margin-left: 10px;
                    }
                    &.sale-price {
                        color: #5A5A5A;
                        margin-left: 8px;
                        text-decoration: line-through;
                    }
                }
            }

            .right {
                margin-left: 80px;
                label {
                    color: #1B1B1B;
                    display: inline-block;
                    margin-right: 16px;
                    text-align: center;
                    vertical-align: middle;

                    .number {
                        display: block;
                        font-size: 18px;
                        line-height: 26px;
                    }

                    .comment {
                        display: block;
                        font-size: 12px;
                        line-height: 18px;
                    }
                }
            }
        }

        .commodity_body .commodity_body-props {
            /*display: flex;
            flex-wrap: wrap;*/
            justify-content: space-between;
            margin-top: 16px;
        }

        .props-item {
            flex: 1;
            flex-basis: 50%;
            line-height: 25px;
            white-space: nowrap;

            &.hidden {
                visibility: hidden;
            }

            .name {
                color: #333;
                padding-left: 14px;
            }

            .value {
                color: #6D6D6D;
                padding-left: 16px;

                &.orange {
                    color: #FD6442;
                }
            }

            .ff-no-choose {
                background-color: #ccc;
                color: #fff;
                border-color: #ccc;
                cursor: default;
            }
        }

        .part_right {
            display: flex;
            justify-content: space-between;
            width: 680px;
            padding-left: 20px;
            box-sizing: border-box;
        }

        .part_right_left {
            width: 100%;
            /*button {
                width: 120px;
                height: 40px;
                border-radius: 2px;
                font-size: 16px;
                outline: none;
                border: 1px solid #FD6442;
                margin-top: 20px;
                margin-right: 20px;
                cursor: pointer;
            }*/

            .order {
                background: rgba(254, 233, 228, 1);
                color: rgba(253, 100, 66, 1);
            }

            .ff-order-disabled {
                background-color: #ccc;
                color: #fff;
                border-color: #ccc;
            }

            .shopping_cart {
                background: #FD6442;
                color: #FFF;
                cursor: pointer;
            }
        }

        .commodity_title {
            height: 24px;
            font-size: 18px;
            color: #333;
            line-height: 24px;
        }


        .Store {
            display: flex;
            align-items: center;
            margin-top: 16px;
            padding-left: 5px;

            button {
                width: 66px;
                height: 26px;
                border-radius: 4px;
                margin-top: 0;
                font-size: 12px;
                line-height: 24px;
                padding: 0;
                background: #FD6442;
                color: #FFF;
                margin-right: 10px;
            }

            span {
                height: 18px;
                font-size: 12px;
                color: rgba(27, 27, 27, 1);
                line-height: 18px;
            }
        }

        .table_body {
            width: 450px;
            min-height: 248px;
            display: flex;
            overflow-x: auto;
            margin-top: 9px;
            max-height: 320px;

            .first_tr {
                li {
                    position: relative;
                    width: 160px;
                    height: 32px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #D6D6D6;
                    box-sizing: border-box;

                    p {
                        width: 80px;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-right: 1px solid #D6D6D6;
                        border-left: 1px solid #d6d6d6;
                    }

                    .td_div {
                        display: flex;
                        height: 100%;

                        span {
                            display: flex;
                            align-items: center;
                            width: 80px;
                            justify-content: center;
                            border-right: 1px solid #D6D6D6;
                            box-sizing: border-box;
                        }

                        .has-bottom {
                            border-bottom: none
                        }
                    }
                }

                li:first-child {
                    width: 160px;
                    height: 80px;
                    position: relative;
                    border-right: 1px solid #D6D6D6;
                    border-left: 1px solid #d6d6d6;
                    border-top: 1px solid #d6d6d6;
                    background: linear-gradient(26deg, transparent 49.5%, #DCDCDC 49.5%, #DCDCDC 50.5%, transparent 50.5%);
                }

                .tdleft {
                    position: absolute;
                    left: 30px;
                    bottom: 30px;
                }


                .tdright {
                    position: absolute;
                    right: 30px;
                    top: 30px
                }
            }

            .last_tr {
                display: flex;
                .last_tr--no-border {
                    border: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                img {
                    height: 54px;
                    border: none;
                    cursor: pointer;
                }

                li:first-child {
                    width: 80px;
                    height: 54px;
                    position: relative;
                    border-right: 1px solid #d6d6d6;
                    border-top: 1px solid #d6d6d6;
                    overflow: hidden;
                }

                li:nth-child(2) {
                    width: 80px;
                    height: 26px;
                    position: relative;
                    border-bottom: 0;
                }

                li {
                    box-sizing: border-box;
                    border-bottom: 1px solid #D6D6D6;
                    border-right: 1px solid #D6D6D6;
                    width: 80px;
                    height: 32px;
                    position: relative;
                    text-align: center;
                    line-height: 32px;

                    span {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-bottom: 1px solid #D6D6D6;
                        height: 25px;

                        &.ff-popover-top {
                            position: absolute;
                            top: 26px;
                            left: 0;
                            width: 100%;
                        }
                    }

                    .userStockHeight {
                        height: 71px;
                        background-color: #fff;
                    }

                    span.disabled {
                        background: #EDEDED
                    }

                    input.disabled {
                        background: #EDEDED
                    }

                    input {
                        border: none;
                        text-align: center;
                        width: 80px;
                        height: 22px;
                    }

                    input[type="text"]:focus {
                        border: 1px solid #4096ee
                    }

                    input.border_input {
                        color: red
                    }
                }
            }

            .activeColorHead {
                background-color: #fee9e4;
            }
        }

        .Stocks {
            height: 18px;
            font-size: 14px;
            color: rgba(140, 140, 140, 1);
            line-height: 18px;
            margin-top: 5px;
            padding-left: 14px;
        }

        .part_right_right {
            width: 160px;
            overflow: hidden;

            p.match {
                text-align: center;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-around;
                color: #575757;
                margin-bottom: 20px;
            }

            p.match:before {
                content: '';
                display: block;
                width: 48px;
                height: 2px;
                background: #979797
            }

            p.match:after {
                content: '';
                display: block;
                width: 48px;
                height: 2px;
                background: #979797
            }
        }

        //不可下单
        .color_Select {
            display: flex;
            padding: 13px 13px 0 13px;
            margin-top: 15px;

            span {
                width: 40px;
                height: 56px;
                display: inline-block;
            }

            ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: flex-start;
                max-height: 203px;
                max-width: 350px;
                overflow-y: auto;
                max-height: 203px;
                max-width: 350px;
                overflow-x: hidden;
                min-width: 350px;
                padding-bottom: 25px;
            }

            li {
                width: 56px;
                height: 56px;
                margin-left: 10px;
                position: relative;
                margin-bottom: 10px;

                span {
                    position: absolute;
                    bottom: -30px;
                    left: 0;
                    width: 100%;
                    height: auto;
                    text-align: center;
                    border: 1px solid #ddd;
                    border-radius: 3px;
                    padding: 3px 0;
                    display: none;
                    font-size: 12px;
                    z-index: 10;
                    background: #fff
                }

                span:after, span:before {
                    border: solid transparent;
                    content: ' ';
                    height: 0;
                    left: 100%; //根据三角形的位置，可以随意更改。
                    position: absolute;
                    width: 0;
                }

                span:after {
                    border-width: 5px;
                    border-bottom-color: #fff;
                    top: -9px; //根据三角的位置改变
                    left: 20px
                }

                //此处是一个白色的三角

                span:before {
                    border-width: 5px;
                    border-bottom-color: #ddd;
                    top: -10px;
                    left: 20px
                }

                //此处是一个黑色的三角
            }

            li:hover {
                span {
                    display: inline-block;
                }
            }

            li.active img {
                border: 1px solid red
            }

            img {
                width: 100%;
                height: 100%;
                cursor: pointer;
                border: 1px solid #D8D8D8;
                display: inline-block;
            }
        }

        .size_Select {
            display: flex;
            padding: 0 13px;

            span {
                width: 40px;
                height: 56px;
                display: inline-block;
            }

            ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: flex-start;
                width: 366px;
            }

            li {
                width: 34px;
                height: 34px;
                margin-left: 10px;
                position: relative;
            }

            input {
                position: absolute;
                top: 50%;
                left: 50%;
            }

            //clip: rect(0, 0, 0, 0);
            label {
                width: 100%;
                height: 100%;
                display: inline-block;
                border: 1px solid #D8D8D8;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                color: #1B1B1B;
                cursor: pointer;
                background: #fff;
                position: absolute;
                top: 0;
                left: 0;
            }

            // label.active{color: #D8D8D8;border-color: #D8D8D8;border-style:  dashed;}
            // input[type="radio"]:checked + label{color: #1B1B1B;border-color:#FD6442;}
        }

        .soldOut {
            display: flex;
            justify-content: center;
            height: 100%;
            position: absolute;
            width: 1080px;
            height: 100%;
        }

        .soldOut_centen {
            width: 460px;
            height: 130px;
            position: absolute;
            top: 238px;
            display: flex;
            justify-content: space-between;

            img {
                width: 100px;
                height: 130px;
            }

            h1 {
                height: 21px;
                font-size: 16px;
                font-family: MicrosoftYaHei;
                color: rgba(27, 27, 27, 1);
                line-height: 21px;
                margin-bottom: 17px;
                margin-top: 5px;
            }

            p {
                height: 19px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(87, 87, 87, 1);
                line-height: 19px;
            }
        }

        .icon-yishoucang {
            color: red;
        }

        .ff-swiper-pre {
            position: absolute;
            left: 0px;
            top: 10px;
            height: 53px;
            line-height: 53px;
            z-index: 3;
            cursor: pointer;
            text-align: center;
            border: 1px solid #ddd;
        }

        .ff-swiper-pre.disabled {
            background: #ddd
        }

        .ff-swiper-next {
            position: absolute;
            right: 0px;
            top: 10px;
            height: 53px;
            line-height: 53px;
            z-index: 3;
            cursor: pointer;
            text-align: center;
            border: 1px solid #ddd;
        }

        .ff-swiper-next.disabled {
            background: #ddd
        }

        .icon-zhengquetixing {
            font-size: 52px;
            color: #1BA53B;
        }

        .dialog-footer {
            .ff_btn {
                font-family: MicrosoftYaHei;
                width: 100px;
                border-radius: 2px;
                height: 24px;
                line-height: 20px;
                padding: 0;
                background: #fff;
                border-color: #FD6442;
                color: #FD6442;
                font-size: 12px;
            }

            .el-button--primary {
                background: #FD6442;
                border-color: #FD6442;
                color: #FFF;
            }
        }

        .rdc_table_header {
            display: flex;

            .el-dialog__header {
                text-align: center
            }

            .rdc_table_left {
                width: 160px;
                padding: 10px 10px 20px 10px;
                box-sizing: border-box;
                border-right: 1px solid #B1B1B1;
                height: 340px;

                li {
                    background: #fff;
                    padding: 3px 0 2px 12px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #B1B1B1;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    height: 24px;
                    box-sizing: border-box;
                    line-height: 20px
                }

                li:hover {
                    background: #FFE6E1;
                    cursor: pointer
                }

                li.active {
                    background: #FD6442;
                    color: #FFF;
                }
            }

            .rdc_table_right {
                width: 390px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding: 10px;

                .searching {
                    width: 200px;
                    height: 40px;
                    font-size: 12px;
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: flex-start;
                }

                label {
                    width: 40px;
                    height: 24px;
                    line-height: 24px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #D8D8D8;
                    border-right: 0;
                    box-sizing: border-box
                }

                input {
                    height: 24px;
                    line-height: 24px;
                    border: 1px solid #D8D8D8;
                    box-sizing: border-box;
                    padding-left: 3px;
                    width: 160px;
                }

                .icon-sousuo {
                    position: absolute;
                    right: 7px;
                    top: 1px;
                    font-size: 12px;
                }
            }

            .rdc_table_body {
                border: 1px solid #E8E8E8;
            }
        }

        .rdc_table_title {
            ul {
                display: flex;
                padding-left: 10px;
                border-bottom: 1px solid #E8E8E8;
                height: 30px;
                line-height: 30px;

                li {
                    margin-right: 10px;
                }

                li:nth-child(1) {
                    width: 38px;
                }

                li:nth-child(2) {
                    width: 130px;
                }

                li:nth-child(3) {
                    width: 130px;
                }
            }
        }

        .rdc_table_tr {
            min-height: 220px;
            max-height: 220px;
            overflow-y: scroll;

            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            ::-webkit-scrollbar-track-piece {
                background-color: #CCCCCC;
                -webkit-border-radius: 6px;
            }

            ::-webkit-scrollbar-thumb:vertical {
                height: 5px;
                background-color: #999999;
                -webkit-border-radius: 6px;
            }

            ::-webkit-scrollbar-thumb:horizontal {
                width: 5px;
                background-color: #CCCCCC;
                -webkit-border-radius: 6px;
            }

            ul {
                display: flex;
                padding-left: 10px;
                border-bottom: 1px solid #E8E8E8;

                li {
                    margin-right: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    font-size: 12px;
                }

                li:nth-child(1) {
                    width: 38px;
                }

                li:nth-child(2) {
                    width: 130px;
                }

                li:nth-child(3) {
                    width: 130px;
                }
            }

            ul:hover {
                background: #FFE6E1
            }

            ul:last-child {
                border-bottom: 0;
            }

            ul.active {
                background: #FD6442;
                color: #fff;
            }
        }

        .rdc_table_btn {
            text-align: right;
            padding: 12px 0 0 0;

            span {
                display: inline-block;
                text-align: center;
                width: 66px;
                height: 24px;
                font-size: 12px;
                border: 1px solid #FD6442;
                border-radius: 2px;
                cursor: pointer;
            }

            span:first-child {
                background: #fff;
                color: #FD6442;
                margin-right: 10px;
            }

            span:last-child {
                background: #FD6442;
                color: #fff;
            }
        }
    }
</style>
<style lang="less" type="text/less">
    // .el-message-box__header{
    // 	padding: 5px 20px 5px;
    // 	text-align: center;
    // 	border-bottom: 1px solid #B1B1B1;
    // }
    .particulars {
        .ff-input.ff-input--suffix {
            input {
                height: 24px;
            }

            span {
                height: 24px;
            }
        }

        .table_body .first_tr li .td_div span:first-child.userStockClass {
            /*border-bottom: none;*/
            background-color: #fff;
            height: 72px;
            width: 74px;
        }

        .swiper-container.swiper-container-horizontal {
            width: 90%;
            height: 53px;
            padding: 10px 0px
        }

        .part_bottom {
            .swiper-slide {
                font-size: 0;
                padding-left: 2px;
                display: flex;
                flex-direction: row;
                justify-content: center;
            }
        }

        .swiper-slide {
            img {
                margin-right: 5px;

                &:last-child {
                    margin-right: 0
                }
            }
        }

        .purchase {
            .el-dialog {
                width: 340px;
            }

            .el-dialog__title {
                font-size: 14px;
            }

            .el-dialog__headerbtn {
                top: 9px;
                color: #575757;
                font-size: 14px;
            }

            .el-dialog--center .el-dialog__body {
                padding: 0 10px;
                box-sizing: border-box;
                margin-bottom: 18px;
                margin-top: 28px;
                line-height: inherit;
            }

            .purchase_centen {
                text-align: center;

                p {
                    height: 21px;
                    font-size: 16px;
                    font-family: MicrosoftYaHei;
                    color: rgba(27, 27, 27, 1);
                    line-height: 21px;
                    margin-top: 8px;
                }
            }
        }

        .rdc_body_header {
            .el-dialog__headerbtn {
                top: 9px;
                color: #575757;
                font-size: 14px;
            }

            .el-dialog {
                width: 560px;
                border-radius: 8px;
            }

            .el-dialog__body {
                padding: 0;
                box-sizing: border-box;
            }
        }

        .el-dialog__header {
            padding: 5px 20px 5px;
            text-align: center;
            border-bottom: 1px solid #B1B1B1;
        }
    }

    .el-dialog__title {
        font-size: 14px;
    }

    .el-message-box.ff_attention {
        width: 340px;
        height: 155px;

        .el-message-box__title {
            font-size: 14px;
        }

        .el-message-box__status {
            top: 28%;
            font-size: 16px !important;
        }

        .el-message-box__header {
            padding: 7px 20px 7px;
            text-align: center;
            border-bottom: 1px solid #B1B1B1;
        }

        .el-message-box__headerbtn {
            top: 6px;
        }

        .el-message-box__message {
            font-size: 12px;
            padding-left: 26px;
            min-height: 62px;
        }

        .successBtn {
            display: inline-block;
            padding: 0;
            text-align: center;
            background: #FD6442;
            width: 66px;
            height: 24px;
            line-height: 22px;
            font-size: 12px;
            border: 1px solid #FD6442;
            border-radius: 2px;
            cursor: pointer;
        }
    }
</style>
<style lang="less">
  .particulars {
      .ff-goods-reservation {
          width: 447px;
          height: 222px;
          border: 1px solid #DCDCDC;
          background-color: #fff;
          box-sizing: border-box;
          color: #666;
          position: relative;
          text-align: center;
          padding-top: 50px;
          .ff-goods--label {
              position: absolute;
              right: -1px;
              top: -1px;
              width: 110px;
              line-height: 32px;
              text-align: center;
              color: #fff;
              background-color: #fd6442;
              font-size: 12px;
              font-weight: 400;
          }
          .icon-shalou {
              font-size: 50px;
              color: #fd6442;
          }
          .ff-goods-reservation-time {
            margin-top: 26px;
          }
          .ff-goods-time-active {
              font-size: 24px;
              font-weight: bold;
              color: #fd6442;
              display: inline-block;
              min-width: 45px;
              text-align: right;
              &:first-child {
                  min-width: 70px;
              }
          }
      }
      .ff-commodity-btns {
          padding-left: 15px;
          margin-top: 50px;
          .ff-commodity--btn {
              width: 121px;
              height: 38px;
              font-size: 16px;
              font-weight: 400;
              border: 1px solid #fd6442;
              box-sizing: border-box;
              transition: opacity .2s;
              &:hover {
                  opacity: .7;
              }
          }
          .ff-commodity--prev {
              color: #fd6442;
              background-color: #FFEDE9;
              margin-right: 24px;
          }
          .ff-commodity--booking {
              color: #fff;
              background-color: #fd6442;
          }
          .ff-commodity--booking-disabled {
              background-color: #ccc;
              border-color: #ccc;
              cursor: not-allowed;
              &:hover {
                  opacity: 1;
              }
          }
      }

  }
</style>
